<template>
    <div>
        <!--pages/doctorComment/doctorComment.wxml-->
        <mt-loadmore  :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="false" bottomPullText=" " bottomDropText=" " bottomLoadingText=" ">
            <ul class='evaluate'>
                <li class='evaluate-item column' v-for="(item,index) in commentList" :key="index" >
                    <div class='evaluate-up flex'>
                        <div class='user flex'>
                            <div class='star'>
                                <img :src="item.level1 < items.type?items.img:items.imgActive" v-for="(items,key) in gradeList"></img>
                            </div>
                            <p class='username'>{{item.phone}}</p>
                        </div>
                        <p class='time'>{{item.createtime}}</p>
                    </div>
                    <div class='evaluate-down column'>
                        <div class='comment'>评语：{{item.commenttext|| '好评'}}</div>
                        <!-- <div class='ill-intro'>症状描述：{{item.disease}}</div> -->
                        <div class='label flex'>
                            <button class='label-item flex' v-if="item.lable1 == 1" >响应速度很快</button>
                            <button class='label-item flex' v-if="item.lable2 == 1" >回答很专业</button>
                            <button class='label-item flex' v-if="item.lable3 == 1" >意见很有帮助</button>
                            <button class='label-item flex' v-if="item.lable4 == 1" >讲解很细致 </button>
                            <button class='label-item flex' v-if="item.lable5 == 1" >回答的及时</button>
                            <button class='label-item flex' v-if="item.lable6 == 1" >态度很好</button>
                        </div>
                    </div>
                </li>
                <li class="page-loading flex" v-if="pageLoading">
                    <img src='../assets/load.gif'></img>
                    <span>加载中</span>
                </li>
            </ul>
        </mt-loadmore>
        <!-- 加载中 -->
        <div class='loading column' v-if="showLoading">
            <img src='../assets/load.gif'></img>
            <p>拼命加载中...</p>
        </div>
    </div>
</template>
<script>
    import { Loadmore } from 'mint-ui';
    import { doctorcomment } from "./../api/index";
    import star from '../assets/star.png'
    import starActive from '../assets/star-active.png'
    export default{
        data(){
            return{
                commentList: [],//医生评价数组
                page: 0,//页数
                pagesize: 10,
                doctorid:'',//医生id
                showLoading:true,
                allLoaded:false,
                pageLoading:false,
                gradeList: [
                    {
                        img: star,
                        imgActive: starActive,
                        type: 1
                    },
                    {
                        img: star,
                        imgActive: starActive,
                        type: 2
                    },
                    {
                        img: star,
                        imgActive: starActive,
                        type: 3
                    },    
                    {
                        img: star,
                        imgActive: starActive,
                        type: 4
                    },
                    {
                        img: star,
                        imgActive: starActive,
                        type: 5
                    },
                ],//评价分数组
            }
        },
        mounted(){
            if(this.$route.params.id){
                this.doctorid = this.$route.params.id
                sessionStorage.setItem('commentId',this.$route.params.id)
            }else{
                this.doctorid = sessionStorage.getItem('commentId')
            }
            this.getdoctorcomment()
        },
        methods:{
            getdoctorcomment(){
                let mstr = sessionStorage.getItem('mstr')
                doctorcomment(mstr,this.doctorid,this.page,this.pagesize).then((res)=>{
                    if(res.data.status === 1){
                        this.commentList = this.commentList.concat(res.data.data)
                        this.page = this.page + this.pagesize
                    }else{
                        this.allLoaded = true;
                        if(this.$refs.loadmore){
                            this.$refs.loadmore.onBottomLoaded();
                        }
                    }
                    this.showLoading = false
                    this.pageLoading = false
                })
            },
            //加载更多
            loadBottom(){
                this.pageLoading = true
                this.getdoctorcomment()
            }
        }
    }
</script>
<style lang="scss" scoped>
@import "../base/css/_base.scss";
/* pages/doctorComment/doctorComment.wxss */
.evaluate{
    padding: 0 torem(30px);
    background: #fff;
}
.evaluate .evaluate-item{
    padding: torem(20px) 0;
    border-bottom: 1px solid #D9D9D9;
}
.evaluate-item .label{
    color: #333333;
    flex-wrap: wrap;
    width: 100%;
}
.evaluate-item .label .label-item{
    border-radius: torem(6px);
	border: solid 1px #EDB668;
    padding: torem(10px) torem(15px);
    margin-right: torem(30px);
    font-size: torem(26px);
    color: #666;
     margin-top: torem(10px);
}
.evaluate-item .evaluate-up{
    justify-content: space-between;
    margin-bottom: torem(15px);
}
.evaluate-up .user{
    align-items: center;
}
.evaluate-up .user .star{
    color: #333333;
    font-size: torem(26px);
    margin-right: torem(10px);
}
.evaluate-up .user .star img{
    width: torem(32px);
    height: torem(32px);
    margin-right: torem(10px);
}
.evaluate-up .user .username{
    color: #808080;
    font-size: torem(24px);
}
.evaluate-up .time{
    color: #999999;
    font-size: torem(24px);
}
.evaluate-down{
    font-size: torem(26px);
    line-height: torem(42px);
}
.evaluate-down .comment{
    color: #333;
    margin-bottom: torem(5px);
}
.evaluate-down .ill-intro{
    color: #666;
}
.page-loading{
    font-size: torem(24px);
    align-items: center;
    justify-content: center;
    padding: torem(30px) 0;
    img{
        width: torem(32px);
        height: torem(32px);
        margin-right: torem(20px);
    }
}

</style>